<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>卡片翻转</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				min-height: 100vh;
				background: #2193b0; /* fallback for old browsers */
				background: -webkit-linear-gradient(right, #6dd5ed, #2193b0);
				background: linear-gradient(to right, #6dd5ed, #2193b0);
			}

			html {
				font-size: 22px;
			}

			.card-container {
				width: 300px;
				height: 400px;
				/* 父亲需要相对定位 */
				position: relative;
				/* 3d立体效果 */
				-webkit-perspective: 1000;
				perspective: 1000;
			}

			.front,
			.back {
				width: 100%;
				height: 100%;
				/* 绝对定位 */
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				/* 重点 */
				backface-visibility: hidden;
				transition: transform 0.5s ease-in-out;
				font-size: 2rem;
				font-family: Helvetica;
				border-radius: 0.8rem;
				color: #fff;
				box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18);
				text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
			}

			.front {
				background: #373b44; /* fallback for old browsers */
				background: -webkit-linear-gradient(
					left,
					#4286f4,
					#373b44
				); /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to left, #4286f4, #373b44);
				/* 初始位置 */
				transform: rotatey(0deg);
			}

			.back {
				background: #fffbd5; /* fallback for old browsers */
				background: -webkit-linear-gradient(left, #b20a2c, #fffbd5);
				background: linear-gradient(to left, #b20a2c, #fffbd5);
				/* 初始位置 */
				transform: rotatey(-180deg);
			}

			/* 重点hover的时候 */
			.card-container:hover .front {
				transform: rotatey(180deg);
			}

			.card-container:hover .back {
				transform: rotatey(0deg);
			}
		</style>
	</head>
	<body>
		<div class="card-container">
			<div class="front">front</div>
			<div class="back">back</div>
		</div>
		<div class="card-container">
			<div class="front">front</div>
			<div class="back">back</div>
		</div>
		<div class="card-container">
			<div class="front">front</div>
			<div class="back">back</div>
		</div>
	</body>
</html>
